// 局部组件

var ComponentA = { template: '<div>component-a</div>' }
var ComponentB = { template: '<div>component-b</div>' }
var ComponentC = { template: '<div>component-c</div>' }


new Vue({
    el: '#app',
    components: {
        // 左边是组件的属性名，也就是说，我们可以在component中定义新的组件元素名
        'component-a': ComponentA,
        'component-b': ComponentB
    }
})

// 局部注册的组件在其子组件中不可用
// 在这里，component-a是无法放在<component-b> * </component-b> 中间的（无法被识别）

// 如果要可以被识别，那么需要

var ComponentD = { template: '<div>component-d</div>' }

var ComponentE = {
    components: {
        'component-d': ComponentD
    },
    template: '<div>component-e</div>',
}

new Vue({
    el: '#app1',
    components: {
        'component-e': ComponentE,
    }
})